<!-- 拟稿人选择组件，单选 -->
<template>
  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet" title="人员"
                    cancel-text="确定">
    <view class="topsearch">
      <van-field v-model="filterText" label="" placeholder="输入关键字进行过滤" :clearable="true"/>
    </view>
    <view class="my-container">
      <view class="tree-left">
        <ly-tree :tree-data="treeData" :props="props" ref="drafter" node-key="deptId"
                 :default-expanded-keys="expandKeys" @node-click="handleNodeClick"
                 :filter-node-method="filterNode" :highlightCurrent="true"/>
      </view>
      <view class="tree-right">
        <van-radio-group v-model="checkedUserId">
          <view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
          <van-cell-group>
            <van-cell v-for="(item,index) in userArr" title-style="margin-left:15rpx" :title="item.userName"
                      clickable @click="selectUser(item.userId,item.userName)">
              <template #icon>
                <van-radio :name="item.userId" icon-size="30rpx"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </view>
    </view>
  </van-action-sheet>
</template>

<script>
export default {
  props: {
    showDrafter: {
      type: Boolean,
      default: false
    },
    drafterData: {
      userName: {
        type: String,
        default: ''
      },
      userId: {
        type: String,
        default: ''
      }
    },

  },

  data() {
    return {
      showCompo: false, //当前组件是否显示
      expandKeys: ["0"], //默认展开的节点-对应的deptId的值
      props: function () {
        return {
          // 这里的label就可以使用函数进行自定义的渲染了
          // label(data, node) {
          // 	return '节点' + node.data.personName;
          // },
          label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
          children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
        }
      },
      filterText: '',
      treeData: [],
      deptName: [], //选中的单位信息
      deptCode: [], //选中的单位信息
      dept: '',
      deptId: '',
      userArr: [],//当前单位下的所有人员
      checkedUserId: '',//选中的人id
      checkedUserName: '',//选中人的姓名
      emptyData: true,//如果没有数据显示暂无数据
      //选中的人员信息
      userInfo: {
        userId: '',
        userName: ''
      },
      showNode: '',//要显示的机构节点
      hideNode: '',//要隐藏的机构节点
    }
  },
  mounted() {
    this.getShowDept()
  },
  watch: {
    showDrafter(val) {
      this.showCompo = val
    },
    filterText(val) {
      this.$refs.drafter.filter(val);
    },
    drafterData: {
      handler(nVal, oVal) {
        if (nVal.userId != '') {
          this.checkedUserId = nVal.userId
          this.checkedUserName = nVal.userName
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    //获取要显示的组织机构代码
    getShowDept() {
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/authority/gljfw/getShowDept/` + this.cache.get('userInfo').deptId),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag//固定值
        })
      }).then(({data}) => {
        if (data.code == 200) {
          if (data.data != null) {
            this.showNode = data.data.hideDepts
            this.hideNode = ''//要隐藏的节点
          }
          this.getOrgTree()
        }
      })
    },
    closeSheet() {
      //关闭的时候把选中的人的信息传回父组件
      this.userInfo.userId = this.checkedUserId
      this.userInfo.userName = this.checkedUserName
      this.$emit('closeDrafterSheet', this.userInfo)
    },

    // 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
    handleRadioChange(obj) {
      if (obj.checked == true) {
        // console.log(obj.node.data.deptName)//单位名称
        // console.log(obj.node.data.deptId)//单位id
        this.dept = obj.node.data.deptName
        this.deptId = obj.node.data.deptId
      } else {
        this.dept = ''
        this.deptId = ''
      }
    },

    // 选人
    handleNodeClick(obj) {
      console.log(obj.data.deptName)//单位名称
      console.log(obj.data.deptId)//单位id
      this.dept = obj.data.deptName
      this.deptId = obj.data.deptId
      this.getUserInfo()
      // console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
    },
    //呈报单位查询
    filterNode(value, data) {
      if (!value) return true;
      return data.deptName.indexOf(value) !== -1;
    },

    onSelectDocType(item) {
      this.docType = item.name
      this.showDocType = false
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },


    getOrgTree() {
      this.$http({
        url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,//固定值
          'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          'showNode': this.showNode,
          'hideNode': this.hideNode
        })
      }).then(({data}) => {
        if (data.code == 200) {
          this.treeData = this.util.treeDataTranslate(data.data, 'deptId', 'parentId')
        }
      })
    },
    //获取呈报人列表
    getUserInfo() {
      this.userArr = []//每次获取清空
      this.emptyData = false
      this.$http({
        url: this.$httploading.adornUrl(`/caac/platform/org/users/getUserByDeptIdAndParams`),
        method: 'get',
        params: this.$http.adornParams({
          'deptId': this.deptId,//单位id
          'page': this.page,
          'rows': this.rows,
          'systemKey': this.cache.get('userInfo').systemKey, //固定值
          'systemFlag': this.cache.get('userInfo').systemFlag, //固定值
        })
      }).then(({data}) => {
        console.log("data: " + JSON.stringify(data));
        if (data.code == 200) {
          if (data.data.total > 0) {
            this.userArr = data.data.rows
          } else {
            this.emptyData = true
          }
        }
      })
    },
    //选中的用户
    selectUser(userId, userName) {
      if (userId == this.checkedUserId) {
        this.checkedUserId = ""//如果再次点击，则取消选中
        this.checkedUserName = ""
      } else {
        this.checkedUserId = userId
        this.checkedUserName = userName
      }
    },

  }
}
</script>

<style>
	.van-action-sheet {
		z-index: 9999;
		min-height: 80%;
	}
	.topsearch{
		position: fixed;
		height: 90rpx;
		z-index: 99;
		width: 100%;
		border: 1rpx solid #f0f0f0;
	}
	.my-container{
		margin-top: 90rpx;
		display: flex;
		flex-direction: row;
	}
	.tree-left{
		margin-top: -20rpx;
		width: 65%;
		border-right: 1rpx solid #f0f0f0;
	}
	.tree-right{
		width: 35%;
		position: fixed;
		right: 0rpx;
		max-height: 750rpx;
		overflow: scroll;
	}
</style>
